Nessa aula, eu apresentei como funciona a estrutura de tokens do nosso design system (Hive). Expliquei os processos necessários para chegar a uma estrutura organizada.
Template de Taxonomia de Tokens [Hive]
cfPRO - Design Tokens Toolkit
Pontos importantes da aula:
- Estrutura de Tokens: Mostrei a estrutura de tokens do nosso design system no Figma, incluindo como adicionar novidades nas variáveis como layout grid e espessura de borda.
- Processo Manual: Enfatizei que, apesar de haver um processo manual envolvido, o uso do template de taxonomia facilita a organização dos tokens.
- Colaboração com Desenvolvedores: Destaquei a importância de trabalhar em conjunto com os desenvolvedores para entender como eles utilizam as variáveis de design, como cores, espaçamentos e tipografia, em diferentes plataformas (web, Android, iOS).
- Convenção de Nomes: Discuti a necessidade de alinhar a convenção de nomes entre design e desenvolvimento para garantir uma comunicação clara e evitar redundâncias ou confusões.
- Variáveis Primitivas: Apresentei as variáveis primitivas, como cores, espaços, opacidade, fontes, tamanhos e sombras, e como elas são estruturadas no nosso design system.
- Tipografia: Expliquei que, embora o Figma ainda não suporte variáveis tipográficas, é possível documentar essas variáveis e preparar-se para quando essa funcionalidade estiver disponível.
- Cores no Modo Escuro: Mostrei como ajustar as cores para o modo escuro, mantendo a consistência da cor principal, mas fazendo ajustes sutis para garantir a legibilidade.
- Auditoria de Design: Instruí sobre a importância de realizar uma auditoria de design para documentar todos os elementos visuais que serão transformados em variáveis primitivas.
- Template de Taxonomia: Comentei sobre o meu template modular e programável que facilita a criação e organização de tokens, e mencionei que disponibilizarei esse recurso para os alunos.
A importância da colaboração com desenvolvedores e como utilizar ferramentas e templates para otimizar esse processo.